<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:54:48
 -->
<template>
  <div>
    <slot name="title">
      <div>
        <h3>期初库存</h3>
        <span class="color-gay">在启用本软件前仓库中已有的商品库存，录入期初库存可以使后续成本价、毛利等值的计算更准确</span>
      </div>
      <el-divider />
    </slot>
    <vxe-grid
      ref="table"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="originStockData"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
import { initDefaultStockData, initUpdateStockData } from './utils/stock'

export default {
  name: 'GoodStock',
  mixins: [oftenuse, specs],
  props: {
    /**
     * 规格数据
     */
    skuData: {
      type: Object,
      default: () => { return {} }
    },
    unitData: {
      type: Array,
      default: () => { return null }
    },
    storeData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      originStockData: [], // 期初信息
      originColumnsData: [
        { field: 'originQuantity',
          title: '期初库存数量', width: 160,
          cellRender: { name: 'ElInputNumber',
            props: { size: 'mini', min: 0 },
            events: { change: this.onCostPrice }
          },
          slots: {
            header: ({ column }) => {
              const value = `期初库存数量${this.baseUnitName}`
              return value
            }
          }
        },
        { field: 'originCostPrice',
          title: '期初成本价', width: 160,
          cellRender: { name: 'ElInputNumber',
            props: { size: 'mini', min: 0 },
            events: { change: this.onCostPrice }
          }
        },
        { field: 'costTotalPrice',
          title: '期初总金额', width: 160
        }
      ]
    }
  },
  computed: {
    columnsData: function() {
      const originColumnsData = this.originColumnsData || []
      return [...originColumnsData]
    },
    baseUnitName: function() {
      const unitData = this.unitData || []
      const unitArr = unitData.filter(item => { return item.multi === 1 })
      if (unitArr.length === 0) return ''
      const unitbase = unitArr[0] || {}
      return `(${unitbase.label})`
    }
  },
  watch: {
    'skuData': {
      handler(skuData) {
        if (!skuData) return
        const { goodsStockList } = skuData
        this.initData(goodsStockList)
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // export api
    getStockData() {
      return this.originStockData
    },
    //
    onCostPrice({ row }) {
      const { originQuantity, originCostPrice } = row
      const costTotalPrice = this.$amount(originQuantity).multiply(originCostPrice).format()
      this.$set(row, 'costTotalPrice', costTotalPrice)
    },
    initData(goodsStockList) {
      if (goodsStockList) {
        const stockData = initUpdateStockData(goodsStockList)
        this.originStockData = stockData
        this.$emit('on-init-success', stockData)
        return
      }
      const data = this.storeData
      const stockData = initDefaultStockData(data)
      this.$emit('on-init-success', stockData)
      this.originStockData = stockData
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal{
    margin: 5px 0;
  }
</style>
